<template>
  <div id="home"
       :class="bg">
    <backgroud v-if="bg == 'bgSar.jpg'"
               :url="bg" />
    <backgroud v-if="bg == 'bgSun.jpg'"
               :url="bg" />
    <navigation id="nav" />
    <asidebar id="aside"
              :style="{top:asideScrollTop,left:asideScrollLeft}" />
    <div class="page">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
var interval = null; //计时器
import backgroud from "@/components/Backgroud";
import navigation from "@/components/Nav";
import asidebar from "@/components/Aside";
export default {
  components: {
    backgroud,
    navigation,
    asidebar
  },
  data() {
    return {
      bg: "bg-monday",
      bgList: [
        "bgSun.jpg",
        "bg-monday",
        "bg-tuesday",
        "bg-wednesday",
        "bg-thursday",
        "bg-friday",
        "bgSar.jpg"
      ],
      scrollTop: "60",
      scrollLeft: "0"
    };
  },
  methods: {
    updataItem() {
      var week = new Date().getDay();
      this.bg = this.bgList[week];
    },
    scrollEvent() {
      this.scrollLeft =
        window.pageXOffset ||
        document.documentElement.scrollLeft ||
        document.body.scrollLeft;
      this.scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
    }
    // selectPage() {
    //   console.log(
    //     "页面切换：",
    //     this.$store.state.pageIndex,
    //     this.$store.state.subPageIndex
    //   );
    //   let page = this.$store.state.pageIndex;
    //   let subPage = this.$store.state.subPageIndex;
    //   if (page == "1") {
    //     this.$router.replace("/select/statistics");
    //   } else if (page == "2") {
    //     this.$router.replace("/select/manage");
    //   } else {
    //     this.$router.replace("/select/write");
    //   }
    // }
  },
  computed: {
    asideScrollLeft: function() {
      return -parseFloat(this.scrollLeft).toFixed(2) + "px";
    },
    asideScrollTop: function() {
      let _scrollTop = parseFloat(this.scrollTop).toFixed(2);
      // console.log(_scrollTop);
      var top = 0;
      if (_scrollTop == 60.0) {
        top = 60;
      } else if (_scrollTop < 60) {
        top = 60 - parseFloat(this.scrollTop).toFixed(2);
      }
      // console.log(top);
      return top + "px";
    }
  },
  mounted() {
    window.addEventListener("scroll", this.scrollEvent);

    this.updataItem();
    if (interval != null) {
      //判断计时器是否为空
      clearInterval(interval);
      interval = null;
    }
    interval = setInterval(this.updataItem, 60 * 1000);
  },
  destroyed() {
    window.removeEventListener("scroll", this.scrollEvent);

    if (interval != null) {
      //判断计时器是否为空
      clearInterval(interval);
      interval = null;
    }
  }
};
</script>

<style lang="less" scoped>
#home {
  height: 100vh;
}
#nav {
  background-color: #ffffffaa;
}
.page {
  margin: 5px 10px 0px 201px;
}
// 背景
.bg-monday {
  background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
}
.bg-tuesday {
  background-image: linear-gradient(to top, #accbee 0%, #e7f0fd 100%);
}
.bg-wednesday {
  background-image: linear-gradient(
    to top,
    #f3e7e9 0%,
    #e3eeff 99%,
    #e3eeff 100%
  );
}
.bg-thursday {
  background-image: linear-gradient(
    to top,
    #bdc2e8 0%,
    #bdc2e8 1%,
    #e6dee9 100%
  );
}
.bg-friday {
  background-image: linear-gradient(
    to top,
    #fdcbf1 0%,
    #fdcbf1 1%,
    #e6dee9 100%
  );
}
</style>
